<!--
 * @Author: wellington wellington@kreditme.id
 * @Date: 2023-07-12 16:56:36
 * @LastEditors: wellington wellington@kreditme.id
 * @LastEditTime: 2023-11-09 10:40:33
 * @FilePath: /background-removal/src/views/RequestAnimationFrame.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="container">
        <p>总耗时： {{ totalTime }}ms</p>
        <button @click="handleStart">开始耗时任务</button>
        <div class="circle"></div>
        <!-- 方向 -->
        <div class="pic">
            <h3>1. 鼠标进入方向判断</h3>
            <div class="picture" ref="pictureBox">
                <img :class="className" src="../assets/img1.webp" alt="">
            </div>
        </div>
        <!-- 动画 -->
        <div class="line">
            <span> 2. 测试文字下方鼠标滑入的动画线条,这个线条是css实现</span>
        </div>
        <!-- 使用form -->
        <div>
            <h3>3. 表单要使用form，使用enter触发提交，输入中文回车确认信息的时候也会触发，使用form就更简单</h3>
            <div>
                <span>没使用form，输入中文确认</span>
                <div>
                    <input type="text" @keydown.enter="onSearch" >
                    <button @click="onSearch">点我确认</button>
                </div>
            </div>
            <div>
                <span>使用form，只有一个事件，点击按钮触发，enter也能触发。在输入框多的时候就不用每个input添加按钮事件</span>
                <form @submit="onSearch">
                    <input type="text" >
                    <button type="submit">点我确认</button>
                </form>
            </div>
        </div>
        <!-- 验证watchEffect -->
        <div>
            <h3>4.验证watchEffect里面有异步请求时搜集不到依赖变化的情况</h3>
            <div>
               {{ speed }}<button @click="addSpeed">速度加</button> 
            </div>
            <div>
                {{ name }} 异步请求后的显示的速度
            </div>
        </div>
        <!-- 简化组件传参数并且传递到父组件方式 -->
        <div>
            <h3>5.简化组件传参数并且传递到父组件方式</h3>
            <ChildForm  v-model="searchData"/>
            输入值{{ searchData.keyword }}， 选中项目{{ searchData.selectValue }}
        </div>
    </div>
</template>

<script setup>
import { onMounted, watchEffect } from 'vue';
import {runTask} from '../utils/requestAnimationFrame'
import ChildForm from './ChildForm.vue'
const totalTime = ref(0)
const sleep = (val) => {
    const now = (new Date()).getTime()
    const time = now + val
    while(true){
        if ((new Date()).getTime() > time) {
            return
        }
    }

}
const handleStart = () => {
    // 执行1000次，每次任务耗时5ms
    const fn = () => {
        sleep(5)
    }
    const now = (new Date()).getTime()
    const list = []
    for (let i = 0;i < 1000;i++) {
        const target = runTask(fn)
        if (target instanceof Promise) {
            list.push(target)
        }
       
    }
    if (list.length) {
        Promise.all(list).then(() => {
        totalTime.value = (new Date()).getTime() - now
    })
    } else {
        totalTime.value = (new Date()).getTime() - now
    }
   
    
   
}

//  鼠标方向部分
const className = ref('')
const pictureBox = ref(null)
// 思路: 在picture盒子中心布置一个坐标系，获取鼠标在盒子的位置，算出相对于中心点的夹角。 这个夹角在什么范围
// 第一步：先拿到坐标中心相对于右上角的夹角
onMounted(() => {
    const pictureDom = pictureBox.value
    const rect = pictureDom.getBoundingClientRect()
    // 计算x横向正坐标 和y轴正向夹角。这个夹角用来和鼠标落点计算的反正切夹角进行对比，就知道了方向
    const theta = Math.atan(rect.height / rect.width)
    console.log(rect)
    pictureDom.addEventListener('mouseenter', (e) => {
        // 这个x,y相对的是左上角坐标系。将坐标系调整到盒子中心
        const x = e.offsetX - rect.width / 2,
        y = rect.height / 2 - e.offsetY;
        console.log(x,y)
        // 函数atan2方法是计算而为坐标系中任意点与原点的连线，与x轴正半轴的夹角角度。
        // 返回值求的弧度值在【PI, -PI】之间
       const d =  Math.atan2(y ,x)
        let dire;
       if (d < theta && d>=-theta) {
        dire = 'right'
       } else if (d >= theta && d < Math.PI - theta) {
        dire = 'top'
       } else if (d < -theta && d >=  theta - Math.PI) {
        dire = 'bottom'
       } else {
        dire = 'left'
       }
       console.log(dire)
       className.value = dire
    })
})


// 表单提交
const onSearch = (e) => {
    e.preventDefault() // 阻止提交表单默认刷新行为
    console.log(123)
}

// 验证异步watchEffect
const speed = ref(0)
const name = ref(0)
const url = ref(0)
const getData = () => {
    return new Promise((resolve) =>{
        resolve(2)
    })
}
const addSpeed = () => {
    speed.value++
}
watchEffect(async () => {
    // speed.value   
    url.value = await getData()  // 如果这里没有使用响应式数据去接收，会有报错
    name.value = speed.value  // 不会搜集下面的依赖，所以name不会更新
})


// 简化父子组件交互数据方式
const searchData = ref({
    keyword: '',
    placeholder: '请输入数据',
    options: [
        {label: '视频',value: '123'},
        {label: '文章',value: '1234'},
        {label: '用户',value: '1235'}
    ],
    selectValue: '1234'
})

</script>

<style  scoped>
.container {
    margin-bottom: 150px;
}
.circle {
    border-radius: 100%;
    width: 100px;
    height: 100px;
    background-color: red;
    animation:mymove 5s infinite;
    position:relative;
}
.pic {
    margin-top: 300px;
  
}
.picture {
    width: 300px;
    height: 200px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
.picture img {
    position: absolute;
    transition: all 0.3s;
    width: 900px;
    height:600px;
    top: -200px;
    left: -300px;
}
.picture:hover .top {
    top: 0
}
.picture:hover .left {
    left: 0
}
.picture:hover .right {
    left: -600px;
}
.picture:hover .bottom {
    top: -400px;
}

.line {
    margin: 100px auto;
    width: 300px;
    font-size: 20px;
    line-height: 2;
}
.line span {
    background: linear-gradient(to right, #ec695c, #61c454) no-repeat right bottom;
    background-size: 0 2px; 
    transition: background-size 1300ms;
}
.line span:hover {
    /* hover的时候让其靠左，从左边开始走，鼠标滑走，使用上面的right */
    background-position-x: left;
    background-size: 100% 2px; 
}
</style>
<style>
@keyframes mymove {
    0% { top: 0px; left: 0px;}
    25% { top: 0px; left: 800px;}
    50% { top: 200px; left: 800px;}
    75% { top: 200px; left: 0px;}
    100% { top: 0px; left: 0px;} 
}
</style>